<template>
  <div>
    <el-card>
      <div slot="header">
        <span>设备指标</span>
        <el-tag class="fl-r">正常</el-tag>
      </div>
      <div class="content">
        <div class="content-item">
          <div>{{data.equipmentCount}}</div>设备总数
        </div>
        <div class="content-item">
          <div>{{data.faultCount}}</div>异常设备数量
        </div>
        <div class="content-item">
          <div>{{(data.equipmentCount - data.faultCount)/data.equipmentCount | formatPercent}}</div>设备完好率
        </div>
      </div>
      <HR align="center" width="100%" color="#987cb9" size="1" style="margin: 10px 0px;"/>
      <div style="text-align: center;">
        <el-button>数据刷新</el-button>
        <el-button>指标详情</el-button>
        <el-button>统计报表</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import reportService from "../../../services/reportService";

export default {
  data() {
    return {
      data: {
        typeMap: {
          bigCarFlow: {
            carCatetoryName: "大型车",
            reverseLaneFlow: { carFlow: 60, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 46, direction: "西坪方向" }
          },
          smallCarFlow: {
            carCatetoryName: "小型车",
            reverseLaneFlow: { carFlow: 20, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 16, direction: "西坪方向" }
          },
          middleCarFlow: {
            carCatetoryName: "中型车",
            reverseLaneFlow: { carFlow: 21, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 23, direction: "西坪方向" }
          }
        },
        carFlowMap: {
          overFlow: {
            laneName: "超车道",
            reverseLaneFlow: { carFlow: 69, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 23, direction: "西坪方向" }
          },
          allFlow: {
            laneName: "所有车道",
            reverseLaneFlow: { carFlow: 101, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 85, direction: "西坪方向" }
          },
          normalFlow: {
            laneName: "行车道",
            reverseLaneFlow: { carFlow: 32, direction: "寺湾方向" },
            straightLaneFlow: { carFlow: 62, direction: "西坪方向" }
          }
        },
        occupancyMap: {
          unit: "%",
          rightOccupancy: { direction: "寺湾方向", occupancy: 20 },
          leftOccupancy: { direction: "西坪方向", occupancy: 20 }
        },
        speedMap: {
          middleCarAvg: {
            carCatetoryName: "中型车",
            reverseCarAvg: { carAvgVelocoty: 77, direction: "寺湾方向" },
            straightCarAvg: { carAvgVelocoty: 65, direction: "西坪方向" }
          },
          smallCarAvg: {
            carCatetoryName: "小型车",
            reverseCarAvg: { carAvgVelocoty: 71, direction: "寺湾方向" },
            straightCarAvg: { carAvgVelocoty: 68, direction: "西坪方向" }
          },
          bigCarAvg: {
            carCatetoryName: "大型车",
            reverseCarAvg: { carAvgVelocoty: 74, direction: "寺湾方向" },
            straightCarAvg: { carAvgVelocoty: 69, direction: "西坪方向" }
          }
        }
      }
    };
  },

  props: {
    // tunnelcode: {
    //     type: 'Strting',
    //     required: true
    // }
  },

  mounted() {
    let _this = this;
    reportService.getfacilityTarget().then(res => {
      if (res.msg == "success") {
        _this.data = res.data;
      }
    });
  },

  wahch: {
    // tunnelcode (n, o){
    // reportService.
    // }
  }
};
</script>
<style lang="scss" scoped>
.fl-r {
  float: right;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content-item {
  text-align: center;
}
</style>
